<template>
  <div class="multi-modal-test">
    <h3>多模态框测试</h3>
    
    <div class="test-section">
      <h4>同时打开多个模态框</h4>
      <div class="button-group">
        <a-button type="primary" @click="openModal1">打开模态框1</a-button>
        <a-button type="primary" @click="openModal2">打开模态框2</a-button>
        <a-button type="primary" @click="openModal3">打开模态框3</a-button>
        <a-button @click="openAllModals">一次性打开3个</a-button>
        <a-button danger @click="closeAll">全部关闭</a-button>
      </div>
      <div class="button-group">
        <a-button @click="openDebugTest">上下文验证测试</a-button>
      </div>
    </div>

    <div class="test-section">
      <h4>嵌套模态框测试</h4>
      <div class="button-group">
        <a-button @click="openNestedModal">打开嵌套模态框</a-button>
      </div>
    </div>

    <div class="results">
      <h4>测试结果</h4>
      <div v-if="results.length > 0">
        <div v-for="(result, index) in results" :key="index" class="result-item">
          <span class="modal-id">模态框 {{ result.id }}:</span>
          <span class="result-text">{{ result.text }}</span>
        </div>
      </div>
      <div v-else class="no-results">
        <p>暂无测试结果</p>
      </div>
      <a-button @click="clearResults" size="small">清除结果</a-button>
    </div>

    <div class="info">
      <h4>当前状态</h4>
      <p>已打开的模态框数量: {{ openModalsCount }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useModal } from '../hooks/useModal';
import TestModal from './TestModal.vue';
import ExampleModal from './ExampleModal.vue';
import ContextDebug from './ContextDebug.vue';

const { openModal } = useModal();

const results = ref([]);
let modalCounter = 0;

// 计算当前打开的模态框数量
const openModalsCount = computed(() => {
  // 这里只是演示，实际可以通过其他方式获取
  return results.value.filter(r => r.status === 'opened').length;
});

const addResult = (id, text, status = 'closed') => {
  results.value.push({
    id,
    text,
    status,
    timestamp: new Date().toLocaleTimeString()
  });
};

const openModal1 = async () => {
  const modalId = ++modalCounter;
  try {
    addResult(modalId, '正在打开模态框1...', 'opened');
    const result = await openModal(TestModal, {
      title: `模态框 ${modalId}`,
      content: `这是第${modalId}个模态框的内容`,
      timestamp: Date.now()
    });
    addResult(modalId, `已确认: ${JSON.stringify(result)}`);
  } catch (error) {
    addResult(modalId, `已取消: ${error.message}`);
  }
};

const openModal2 = async () => {
  const modalId = ++modalCounter;
  try {
    addResult(modalId, '正在打开模态框2...', 'opened');
    const result = await openModal(ExampleModal, {
      title: `审批模态框 ${modalId}`,
      description: `这是第${modalId}个审批模态框`,
      userId: `user_${modalId}`
    });
    addResult(modalId, `审批结果: ${JSON.stringify(result)}`);
  } catch (error) {
    addResult(modalId, `已取消: ${error.message}`);
  }
};

const openModal3 = async () => {
  const modalId = ++modalCounter;
  try {
    addResult(modalId, '正在打开模态框3...', 'opened');
    const result = await openModal(TestModal, {
      title: `数据模态框 ${modalId}`,
      data: { modalId, random: Math.random() }
    });
    addResult(modalId, `数据返回: ${JSON.stringify(result)}`);
  } catch (error) {
    addResult(modalId, `已取消: ${error.message}`);
  }
};

const openAllModals = async () => {
  // 快速连续打开多个模态框
  openModal1();
  setTimeout(() => openModal2(), 500);
  setTimeout(() => openModal3(), 1000);
};

const openNestedModal = async () => {
  const modalId = ++modalCounter;
  try {
    addResult(modalId, '正在打开嵌套模态框...', 'opened');
    const result1 = await openModal(TestModal, {
      title: `外层模态框 ${modalId}`,
      content: '这是外层模态框，点击确认后将打开内层模态框'
    });
    
    // 在外层模态框关闭后打开内层模态框
    const nestedId = ++modalCounter;
    addResult(nestedId, '正在打开内层模态框...', 'opened');
    const result2 = await openModal(ExampleModal, {
      title: `内层模态框 ${nestedId}`,
      description: '这是从内层模态框打开的',
      parentResult: result1
    });
    
    addResult(nestedId, `嵌套操作完成: ${JSON.stringify(result2)}`);
  } catch (error) {
    addResult(modalId, `嵌套操作取消: ${error.message}`);
  }
};

const closeAll = () => {
  // 这里只是清空显示，实际关闭需要用户手动操作
  addResult('system', '已请求关闭所有模态框');
};

const openDebugTest = async () => {
  // 同时打开多个调试模态框，验证上下文隔离
  const debugData = [
    { debugId: 'modal-A', data: { name: 'Alice', age: 25 } },
    { debugId: 'modal-B', data: { name: 'Bob', age: 30 } },
    { debugId: 'modal-C', data: { name: 'Charlie', age: 35 } }
  ];

  debugData.forEach((data, index) => {
    setTimeout(async () => {
      try {
        const result = await openModal(ContextDebug, data);
        addResult(`debug-${data.debugId}`, `返回: ${JSON.stringify(result)}`);
      } catch (error) {
        addResult(`debug-${data.debugId}`, `取消: ${error.message}`);
      }
    }, index * 200);
  });
};

const clearResults = () => {
  results.value = [];
};
</script>

<style scoped>
.multi-modal-test {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.test-section h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.results {
  margin-top: 24px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.results h4 {
  margin: 0 0 12px 0;
}

.result-item {
  margin-bottom: 8px;
  padding: 8px;
  background: white;
  border-radius: 4px;
  font-size: 14px;
}

.modal-id {
  font-weight: bold;
  color: #1890ff;
  margin-right: 8px;
}

.result-text {
  color: #333;
}

.no-results {
  color: #999;
  text-align: center;
  padding: 20px;
}

.info {
  margin-top: 16px;
  padding: 12px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
</style>